<template>
  <div class="login">
    <!-- 粒子特效 -->
    <vue-particles color="#fff"
                   :particle-opacity="0.7"
                   :particles-number="40"
                   shape-type="circle"
                   :particle-size="4"
                   lines-color="#fff"
                   :lines-width="1"
                   :line-linked="true"
                   :line-opacity="0.4"
                   :lines-distance="150"
                   :move-speed="4"
                   :hover-effect="true"
                   hover-mode="grab"
                   :click-effect="true"
                   click-mode="push"
                   class="lizi" />
    <div class="login-box">
      <div class="left">
      </div>
      <div class="right">
        <div class="login-title">
          <span>房屋租赁系统</span>
        </div>
        <div class="loginmain">
          <div class="login-con">
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="loginForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="用户身份" prop="role">
              <el-radio-group v-model="loginForm.role">
              <el-radio  label="admin">管理员</el-radio>
              <el-radio  label="renter">租客</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button class="loginbtn" type="primary" @click="login('loginForm')">登录</el-button>
            </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script lang="js">
export default {
  data() {
    return {
      loginForm: {
          username: 'admin',
          password: '123456',
          role: 'admin'
      },
      rules: {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
          ],
          password: [
            {  required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
          ],
          role: [
            { required: true, message: '请选择登录身份', trigger: 'change' }
          ],
      }
    }
  },
  methods: {
    login(formName){
      this.$refs[formName].validate((valid) => {
           if (valid) {
        this.$axios.post("/login",this.loginForm).then((res)=>{
            if (res.data.code === 1){
              // 保存 token 到 localStorage 中
              localStorage.setItem('token', res.data.data);
              this.$store.commit('change_userInfo',{role:this.loginForm.role,username:this.loginForm.username})
              this.$router.push({path:'/home'});
              this.$message({
                message: '登录成功',
                type: 'success'
              });
            } else{this.$message({
              message: '登录失败',
              type: 'error'
            });
            }
          })
          }


      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #172a36;
  .login-box {
    display: flex;
    width: 800px;
    height: 345px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10px;
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    background-color: #fff;
  }
  .left {
    flex: 1;
    background: url('../assets/img/logo.png') no-repeat center center;
  }
  .right {
    flex: 1;
    margin-left: 10px;
  }
  .login-title {
    color: #222;
    height: 60px;
    line-height: 60px;
    font-size: 26px;
    text-align: center;
  }
    .login-con {
    width: 90%;
    .loginbtn.el-button--primary{
      width: 100%;
    }
  }
}
</style>
